import { Show } from "@/component/Display";
import { ITaskInfo } from "@/mgr";
import { CloseOutlined, UploadOutlined } from "@ant-design/icons";
import { Button, Flex, Typography } from "antd";
import { TextProps } from "antd/es/typography/Text";
import dayjs from "dayjs";
import { useMemo } from "react";
import { List } from "../_BaseView/List";
const { Text } = Typography;
const list_item_title_style: React.CSSProperties = {
  whiteSpace: "nowrap",
  wordBreak: "keep-all",
  overflow: "hidden",
  textOverflow: "ellipsis",
  flexShrink: "0",
}
const list_item_desc_style: React.CSSProperties = {
  whiteSpace: "nowrap",
  wordBreak: "keep-all",
  overflow: "hidden",
  textOverflow: "ellipsis",
  flexShrink: "0",
}
const status_text_type: Record<Required<ITaskInfo>['status'], TextProps['type']> = {
  resolved: 'success',
  rejected: 'danger',
  waiting: 'secondary',
  pending: 'warning'
}
const list_item_time_style: React.CSSProperties = {
  ...list_item_desc_style
}
const list_item_style: React.CSSProperties = {
  padding: '10px',
  transition: 'background-color 200ms',
  height: '120px'
}
export interface ITaskItemProps {
  task: ITaskInfo;
  on_click_close?(): void;
  on_click_submit?(): void;
}
export function TaskItem(props: ITaskItemProps) {
  const { task, on_click_close, on_click_submit } = props;
  const result_text = `[${task.status}]${' ' + (task.resaon || '')}`
  return useMemo(() => (
    <List.Item title={task.title} key={task.id} style={list_item_style}>
      <List.Item.Meta
        title={
          <Flex style={{ display: 'flex' }} justify='space-between'>
            <Text style={list_item_title_style}>
              {task.type ? `[${task.type}]` : null}任务名: {task.title} {task.retry_time ? ` 已重试:${task.retry_time}次` : ''}
            </Text>
            <Flex>
              <Show yes={task.status === 'waiting'}>
                <Button type='text' size='small' onClick={on_click_submit}>
                  <UploadOutlined />
                </Button>
              </Show>
              <Button type='text' size='small' onClick={on_click_close}>
                <CloseOutlined />
              </Button>
            </Flex>
          </Flex>
        }
        description={
          <Flex gap={5} vertical>
            <Text title={task.desc} style={list_item_desc_style}>{task.desc}</Text>
            <Text title={result_text} style={list_item_desc_style} type={status_text_type[task.status!]}>
              {result_text}
            </Text>
            <Flex gap={5}>
              {!task.push_time || <Text style={list_item_time_style} type='secondary'>
                生成时间: {dayjs(task.push_time).format('YYYY-MM-DD HH:mm:ss')}
              </Text>}
              {!task.start_time || <Text style={list_item_time_style} type='secondary'>
                开始时间: {dayjs(task.start_time).format('YYYY-MM-DD HH:mm:ss')}
              </Text>}
              {!task.finish_time || <Text style={list_item_time_style} type='secondary'>
                结束时间: {dayjs(task.finish_time).format('YYYY-MM-DD HH:mm:ss')}
              </Text>}
            </Flex>

          </Flex>
        } />
    </List.Item>
  ), [task, result_text])
}